<template>
    <div class="login">
        <div class="left">
            <div class="box">
                <div class="big">{{ systemName }}</div>
                <!-- <div class="big">供热燃气安全智慧监管平台</div> -->
                <div>{{ systemNameEn }}</div>
                <!-- <div>Intelligent Supervision Platform For Heating And Gas Safety</div> -->
            </div>
        </div>
        <div class="right">
            <div class="box">
                <div class="logo">
                    <img src="@/assets/images/logo/logo.png" alt="">
                </div>
                <h1>{{ systemName }}</h1>
                <el-form :model="loginForm" ref="ruleForm" class="demo-ruleForm">
                    <!-- prop：在做校验的时候必须加上 -->
                    <el-form-item label="账号" prop="userName">
                        <el-input v-model="loginForm.userName" clearable placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="passWord">
                        <el-input v-model="loginForm.passWord" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="租户" prop="tenantId">
                        <el-select v-model="ruleForm.tenantId" placeholder="请输入租户">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item>
                        <el-button type="primary" @click="loginSubmit()">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="footer">
                <p class="name">版权所有：{{ company }}</p>
                <p>建议浏览器：IE8及以上、360、谷歌、Firefox v22</p>
                <p>技术支持：{{ company }} &nbsp;&nbsp;&nbsp;&nbsp;联系电话：{{ phone }} &nbsp;&nbsp;&nbsp;&nbsp;备案号：<a class="link"
                        href="https://beian.miit.gov.cn/" target="_blank">{{ recordNumber }}</a></p>
            </div>
        </div>
    </div>
</template>

<script>
import { login, getRouteList } from "@/common/api/login.js";
import { SYSTEM_NAME, COMPANY, PHONE, RECORD_NUMBER,SYSTEM_NAME_EN } from "@/common/constant/Const";
import { refreshRoutes } from '@/router';

export default {
    data() {
        return {
            systemName: SYSTEM_NAME,
            company: COMPANY,
            phone: PHONE,
            recordNumber: RECORD_NUMBER,
            systemNameEn: SYSTEM_NAME_EN,
            loginForm: {
                "passWord": "admin123Root",
                "userName": "site"
                // tenantId: '',
            },
            loading: false,
            // registerForm: {
            //     userName: '',
            //     passWord: '',
            // },
            // paging: {
            //     currentPage: 1,
            //     pageSize: 10,
            //     searchVal: null,
            // },
            pagingData: {
                currentPage: "",
                pageSize: "",
                total: "",
                totalPage: "",
                totalList: [],
            },
            isWindows: true,
            // rules: {
            //     userName: [
            //         { required: true, trigger: "blur", message: "请输入用户名" },
            //     ],
            //     passWord: [{ required: true, trigger: "blur", message: "请输入密码" }],
            //     tenantId: [{ required: true, trigger: "blur", message: "请输入租户" }],
            // },
            // routeParams: {
            //     currentPage: 1,
            //     pageSize: 100,
            //     searchVal: null,
            //     userId: null,
            // },
            mainRightWidth: '23vw',
            mainInputWidth: '15vw',
        };
    },
    mounted() {
        this.checkUserAgent();
    },
    methods: {
        checkUserAgent() {
            const userAgent = navigator.userAgent;
            if (userAgent.includes('Windows') || userAgent.includes('Win')) {
                console.log("win")
            } else {
                console.log("other")
                this.isWindows = false;
                this.mainRightWidth = '70vw';
                this.mainInputWidth = '53vw';
            }
        },
        loginSubmit() {
            if (!this.loginForm.userName || !this.loginForm.passWord) {
                this.$message.error('请输入用户名和密码');
                return;
            }
            this.loading = true;
            login(this.loginForm).then((resp) => {
                if (resp.data) {
                    window.sessionStorage.setItem("token", resp.data.token);
                    window.sessionStorage.setItem("userInfo", JSON.stringify(resp.data));
                    this.$store.dispatch('updatUserInfo', resp.data);
                    getRouteList().then((result) => {
                        if (result) {
                            const menuList = [{
                                "id": 0,
                                "menuName": "首页",
                                "parentId": 0,
                                "orderNum": 1,
                                "path": "dashboard",
                                "component": "Dashboard",
                                "query": null,
                                "isFrame": 1,
                                "isCache": 0,
                                "menuType": "M",
                                "visible": "0",
                                "status": "0",
                                "icon": "s-home",
                                "sysMenuType": null,
                                "children": [

                                ]
                            }];
                            if (result.data && result.data.length > 0) {
                                result.data.forEach(item => {
                                    menuList.push(item);
                                });
                            }
                            window.sessionStorage.setItem("menuList", JSON.stringify(menuList));
                            this.$store.dispatch('updateMenuList', menuList);
                            refreshRoutes();
                            this.$router.replace('/dashboard');
                        }
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    });
                } else {
                    this.loading = false;
                }
            }).catch(() => {
                this.loading = false;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.login::v-deep {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(@/assets/images/login/bj.jpg);
    background-size: cover;
    display: flex;

    .left {
        width: 62.5%;
        height: 100%;

        .box {
            margin: 40px 0 0 50px;
            font-size: 12px;
            font-weight: 300;
            color: #D9E1FA;
            height: 18px;
            line-height: 18px;

            .big {
                height: 40px;
                font-size: 25px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 40px;
            }
        }
    }

    .right {
        width: 37.5%;
        height: 100%;
        background: rgba(4, 4, 5, 0.3);
        backdrop-filter: blur(2px);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-wrap: wrap;

        .box {
            width: 400px;

            .logo {
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 100px;
                    height: 100px;
                }
            }

            h1 {
                height: 60px;
                font-size: 23px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 60px;
            }

            .el-form {
                .el-form-item {
                    .el-form-item__label {
                        height: 30px;
                        font-size: 12px;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 30px;

                        &::before {
                            display: none;
                        }
                    }

                    &:nth-child(1),
                    &:nth-child(2) {
                        margin-bottom: 15px !important;
                    }

                    &:nth-child(3) {
                        margin-bottom: 10px !important;
                        line-height: 25px;

                        .el-form-item__content {
                            text-align: right;
                            font-size: 10px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 25px;

                            .el-select {
                                width: 100%;
                            }
                        }
                    }

                    &:nth-child(4),
                    &:nth-child(3) {
                        margin-top: 30px;

                        .el-button {
                            width: 100%;
                            background: linear-gradient(360deg, #0F65EA 0%, #00D9EA 100%);
                            border-radius: 8px;
                        }
                    }
                }
            }
        }

        .footer {
            margin-bottom: 20px;
            text-align: center;
            padding: 20px;

            p {
                font-size: 14px;
                color: #eee;
                line-height: 30px;
            }

            .link {
                color: inherit;
                text-decoration: none;
            }

            .link:hover,
            .link:active {
                text-decoration: none;
            }
        }
    }


}
</style>